<template>
    <div class="box">
        <el-card class="l">
            <h4>调试</h4>
            <el-divider/>
            <h5>秘钥生成</h5>
            <el-divider/>
            <el-form>
                <el-form-item label="公钥">
                    <el-input v-model="pair.pub" type="textarea"/>
                </el-form-item>
                <el-form-item label="私钥">
                    <el-input v-model="pair.pri" type="textarea"/>
                </el-form-item>
                <div>
                    <el-button type="primary" @click="generatePair()">生成密钥</el-button>
                </div>
            </el-form>
            <h5 style="margin-top: 20px;">加密</h5>
            <el-divider/>
            <div>
                <el-form label-width="100px">
                    <el-form-item label="公钥">
                        <el-input v-model="encrypt.publicKey"/>
                    </el-form-item>
<!--                    <el-form-item label="私钥">-->
<!--                        <el-input v-model="encrypt.privateKey"/>-->
<!--                    </el-form-item>-->
                    <el-form-item label="待加密文本">
                        <el-input type="textarea" v-model="encrypt.text"/>
                    </el-form-item>
                    <el-form-item label="加密结果" v-if="encrypt.result">
                        <el-input type="textarea" readonly v-model="encrypt.result"/>
                    </el-form-item>
                    <div>
                        <el-button @click="doEncrypt" type="primary">加密</el-button>
                    </div>
                </el-form>
            </div>
            <h5 style="margin-top: 20px;">解密</h5>
            <el-divider/>
            <div>
                <el-form label-width="100px">
                    <el-form-item label="私钥">
                        <el-input v-model="decrypt.privateKey"/>
                    </el-form-item>
                    <el-form-item label="待解密文本">
                        <el-input type="textarea" v-model="decrypt.text"/>
                    </el-form-item>
                    <el-form-item label="解密结果" v-if="decrypt.result">
                        <el-input type="textarea" readonly v-model="decrypt.result"/>
                    </el-form-item>
                    <div>
                        <el-button @click="doDecrypt" type="primary">解密</el-button>
                    </div>
                </el-form>
            </div>
            <h5 style="margin-top: 20px;">签名</h5>
            <el-divider/>
            <div>
                <el-form label-width="100px">
                    <el-form-item label="私钥">
                        <el-input v-model="decrypt.privateKey"/>
                    </el-form-item>
                    <el-form-item label="待签名文本">
                        <el-input type="textarea" v-model="encrypt.text"/>
                    </el-form-item>
                    <el-form-item label="签名结果" v-if="encrypt.signResult">
                        <el-input type="textarea" readonly v-model="encrypt.signResult"/>
                    </el-form-item>
                </el-form>
                <div>
                    <el-button @click="doSign" type="primary">签名</el-button>
                </div>
            </div>
            <h5 style="margin-top: 20px;">验签</h5>
            <el-divider/>
            <div>
                <el-form label-width="100px">
                    <el-form-item label="公钥">
                        <el-input v-model="encrypt.publicKey"/>
                    </el-form-item>
                    <el-form-item label="签名文本">
                        <el-input type="textarea" v-model="decrypt.signSource"/>
                    </el-form-item>
                    <el-form-item label="签名">
                        <el-input type="textarea" v-model="decrypt.signText"/>
                    </el-form-item>
                    <el-form-item label="验签结果" v-if="decrypt.signResult">
                        <el-input type="textarea" readonly v-model="decrypt.signResult"/>
                    </el-form-item>
                </el-form>
                <div>
                    <el-button @click="doVertify" type="primary">签名</el-button>
                </div>
            </div>
        </el-card>
        <el-card class="r">
            <h4>Java代码示例</h4>
            <el-divider/>
            <code-editor ref="editor" class="editor h-100" v-model="editorContent"
                         language="java" theme="dracula" readonly></code-editor>
        </el-card>
    </div>
</template>

<script>
    import CodeEditor from "./code-editor";
    export default {
        name: "sm2",
        components: {CodeEditor},
        data(){
            return {
                pair:{
                    pub: "",
                    pri: ""
                },
                editorContent: "",
                encrypt:{
                    // privateKey: "",
                    publicKey: "",
                    text: "",
                    result: "",
                    signResult:""
                },
                decrypt: {
                    privateKey: "",
                    text: "",
                    result: "",
                    signSource:"",
                    signText:"",
                    signResult:""
                }
            }
        },
        async mounted() {
            var r = await import("./code/sm2")
            var code = r.default.split("\n")
                .map(e => e.trim())
                .filter(e => e)
                .join("\n")
            this.editorContent = code
            console.log(code)
        },
        methods:{
            async generatePair(){
                var r = await this.$post("/api/sm2/generatePair")
                this.pair = r
            },
            async doEncrypt(){
                var r = await this.$post("/api/sm2/doEncrypt", this.encrypt)
                this.encrypt.result = r.result
            },
            async doSign(){
                var data = this.$clone(this.encrypt)
                data.privateKey = this.decrypt.privateKey
                var r = await this.$post("/api/sm2/doSign", data)
                this.encrypt.signResult = r.result
            },
            async doVertify() {
                var data = this.$clone(this.decrypt)
                data.publicKey = this.encrypt.publicKey
                var r = await this.$post("/api/sm2/doVertify", data)
                this.decrypt.signResult = r.result
            },
            async doDecrypt(){
                var r = await this.$post("/api/sm2/doDecrypt", this.decrypt)
                this.decrypt.result = r.result
            }
        }
    }
</script>

<style scoped>
    h5,h4{
        text-align: left;
    }
    .box{
        display: flex;
        flex-direction: row;
    }
    .l{
        flex: 1;
        margin: 5px;
    }
    .r{
        flex: 1;
        margin: 5px;
    }
</style>
